<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Timeline</h1>
        <p>Timeline visualizes a series of chained events.</p>
    </div>
    <app-demoActions github="timeline" stackblitz="timeline-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Left Align</h5>
        <p-timeline [value]="events1">
            <ng-template pTemplate="content" let-event>
                {{event.status}}
            </ng-template>
        </p-timeline>
    </div>

    <div class="card">
        <h5>Right Align</h5>
        <p-timeline [value]="events1" align="right">
            <ng-template pTemplate="content" let-event>
                {{event.status}}
            </ng-template>
        </p-timeline>
    </div>

    <div class="card">
        <h5>Alternate Align</h5>
        <p-timeline [value]="events1" align="alternate">
            <ng-template pTemplate="content" let-event>
                {{event.status}}
            </ng-template>
        </p-timeline>
    </div>

    <div class="card">
        <h5>Opposite Content</h5>
        <p-timeline [value]="events1">
            <ng-template pTemplate="content" let-event>
                <small class="p-text-secondary">{{event.date}}</small>
            </ng-template>
            <ng-template pTemplate="opposite" let-event>
                {{event.status}}
            </ng-template>
        </p-timeline>
    </div>

    <div class="card">
        <h5>Customized</h5>
        <p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
            <ng-template pTemplate="marker" let-event>
                <span class="custom-marker shadow-2" [style.backgroundColor]="event.color">
                    <i [ngClass]="event.icon"></i>
                </span>
            </ng-template>
            <ng-template pTemplate="content" let-event>
                <p-card [header]="event.status" [subheader]="event.date">
                    <img *ngIf="event.image" [src]="'assets/showcase/images/demo/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                    <button pButton label="Read more" class="p-button-text"></button>
                </p-card>
            </ng-template>
        </p-timeline>
    </div>

    <div class="card">
        <h5>Horizontal</h5>
        <h6>Top Align</h6>
        <p-timeline [value]="events2" layout="horizontal" align="top">
            <ng-template pTemplate="content" let-event>
                {{event}}
            </ng-template>
        </p-timeline>

        <h6>Bottom Align</h6>
        <p-timeline [value]="events2" layout="horizontal" align="bottom">
            <ng-template pTemplate="content" let-event>
                {{event}}
            </ng-template>
        </p-timeline>

        <h6>Alternate Align</h6>
        <p-timeline [value]="events2" layout="horizontal" align="alternate">
            <ng-template pTemplate="content" let-event>
                {{event}}
            </ng-template>
            <ng-template pTemplate="opposite" let-event>
                &nbsp;
            </ng-template>
        </p-timeline>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;TimelineModule&#125; from 'primeng/timeline';
</app-code>

            <h5>Getting Started</h5>
            <p>Timeline receives the events with the <i>value</i> property as a collection of arbitrary objects. In addition, <i>content</i> template is required to display the representation of an event.
             Example below is a sample events array that is used throughout the documentation.</p>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component,OnInit&#125; from '@angular/core';
import &#123;PrimeIcons&#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './timelinedemo.html'
&#125;)
export class TimelineDemo implements OnInit &#123;

    events: any[];
    
    ngOnInit() &#123;
        this.events = [
            &#123;status: 'Ordered', date: '15/10/2020 10:30', icon: PrimeIcons.SHOPPING_CART, color: '#9C27B0', image: 'game-controller.jpg'&#125;,
            &#123;status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7'&#125;,
            &#123;status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800'&#125;,
            &#123;status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B'&#125;
        ];
    &#125;
&#125;
</app-code>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-timeline [value]="events"&gt;
    &lt;ng-template pTemplate="content" let-event&gt;
        &#123;&#123;event.status&#125;&#125;
    &lt;/ng-template&gt;
&lt;/p-timeline&gt;
</app-code>

            <h5>Layout</h5>
            <p>Default layout of the timeline is vertical, setting <i>layout</i> to "horizontal" displays the items horizontally.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-timeline [value]="events" layout="horizontal"&gt;
    &lt;ng-template pTemplate="content" let-event&gt;
        &#123;&#123;event.status&#125;&#125;
    &lt;/ng-template&gt;
&lt;/p-timeline&gt;
</app-code>

            <h5>Alignment</h5>
            <p>Location of the timeline bar is defined using the <i>align</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-timeline [value]="events" align="right"&gt;
    &lt;ng-template pTemplate="content" let-event&gt;
        &#123;&#123;event.status&#125;&#125;
    &lt;/ng-template&gt;
&lt;/p-timeline&gt;
</app-code>

            <p>In addition, the "alternate" alignment option make the contents take turns around the timeline bar.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-timeline [value]="events" align="alternate"&gt;
    &lt;ng-template pTemplate="content" let-event&gt;
        &#123;&#123;event.status&#125;&#125;
    &lt;/ng-template&gt;
&lt;/p-timeline&gt;
</app-code>

            <h5>Opposite</h5>
            <p>Content to be placed at the other side of the bar is defined with the <i>opposite</i> template.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-timeline [value]="events"&gt;
    &lt;ng-template pTemplate="content" let-event&gt;
        &lt;small class="p-text-secondary"&gt;&#123;&#123;event.date&#125;&#125;&lt;/small&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="opposite" let-event&gt;
        &#123;&#123;event.status&#125;&#125;
    &lt;/ng-template&gt;
&lt;/p-timeline&gt;
</app-code>

            <h5>Custom Markers</h5>
            <p><i>marker</i> template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.</p>
          
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-timeline [value]="events1" align="alternate"&gt;
    &lt;ng-template pTemplate="marker" let-event&gt;
        &lt;span class="custom-marker shadow-2" [style.backgroundColor]="event.color"&gt;
            &lt;i [ngClass]="event.icon"&gt;&lt;/i&gt;
        &lt;/span&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="content" let-event&gt;
        &lt;p-card [header]="event.status" [subheader]="event.date"&gt;
            &lt;img *ngIf="event.image" [src]="'assets/showcase/images/demo/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" /&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
            &lt;button pButton label="Read more" class="p-button-text"&gt;&lt;/button&gt;
        &lt;/p-card&gt;
    &lt;/ng-template&gt;
&lt;/p-timeline&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of events to display.</td>
                        </tr>
                        <tr>
                            <td>align</td>
                            <td>string</td>
                            <td>left</td>
                            <td>Position of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.</td>
                        </tr>
                        <tr>
                            <td>layout</td>
                            <td>string</td>
                            <td>vertical</td>
                            <td>Orientation of the timeline, valid values are "vertical" and "horizontal".</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>opposite</td>
                            <td>$implicit: Data of the timeline event</td>
                        </tr>
                        <tr>
                            <td>marker</td>
                            <td>$implicit: Data of the timeline event</td>
                        </tr>
                        <tr>
                            <td>content</td>
                            <td>$implicit: Data of the timeline event</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-timeline</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-left</td>
                            <td>Container element when alignment is left.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-right</td>
                            <td>Container element when alignment is right.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-top</td>
                            <td>Container element when alignment is top.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-bottom</td>
                            <td>Container element when alignment is bottom.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-alternate</td>
                            <td>Container element when alignment is alternating.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-vertical</td>
                            <td>Container element of a vertical timeline.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-horizontal</td>
                            <td>Container element of a horizontal timeline.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-event</td>
                            <td>Event element.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-event-opposite</td>
                            <td>Opposite of an event content.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-event-content</td>
                            <td>Event content.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-event-separator</td>
                            <td>Separator element of an event.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-event-marker</td>
                            <td>Marker element of an event.</td>
                        </tr>
                        <tr>
                            <td>p-timeline-event-connector</td>
                            <td>Connector element of an event.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/timeline" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-timeline-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Left Align&lt;/h5&gt;
    &lt;p-timeline [value]="events1"&gt;
        &lt;ng-template pTemplate="content" let-event&gt;
            &#123;&#123;event.status&#125;&#125;
        &lt;/ng-template&gt;
    &lt;/p-timeline&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Right Align&lt;/h5&gt;
    &lt;p-timeline [value]="events1" align="right"&gt;
        &lt;ng-template pTemplate="content" let-event&gt;
            &#123;&#123;event.status&#125;&#125;
        &lt;/ng-template&gt;
    &lt;/p-timeline&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Alternate Align&lt;/h5&gt;
    &lt;p-timeline [value]="events1" align="alternate"&gt;
        &lt;ng-template pTemplate="content" let-event&gt;
            &#123;&#123;event.status&#125;&#125;
        &lt;/ng-template&gt;
    &lt;/p-timeline&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Opposite Content&lt;/h5&gt;
    &lt;p-timeline [value]="events1"&gt;
        &lt;ng-template pTemplate="content" let-event&gt;
            &lt;small class="p-text-secondary"&gt;&#123;&#123;event.date&#125;&#125;&lt;/small&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="opposite" let-event&gt;
            &#123;&#123;event.status&#125;&#125;
        &lt;/ng-template&gt;
    &lt;/p-timeline&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Customized&lt;/h5&gt;
    &lt;p-timeline [value]="events1" align="alternate" styleClass="customized-timeline"&gt;
        &lt;ng-template pTemplate="marker" let-event&gt;
            &lt;span class="custom-marker shadow-2" [style.backgroundColor]="event.color"&gt;
                &lt;i [ngClass]="event.icon"&gt;&lt;/i&gt;
            &lt;/span&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="content" let-event&gt;
            &lt;p-card [header]="event.status" [subheader]="event.date"&gt;
                &lt;img *ngIf="event.image" [src]="'assets/showcase/images/demo/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" /&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
                &lt;button pButton label="Read more" class="p-button-text"&gt;&lt;/button&gt;
            &lt;/p-card&gt;
        &lt;/ng-template&gt;
    &lt;/p-timeline&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Horizontal&lt;/h5&gt;
    &lt;h6&gt;Top Align&lt;/h6&gt;
    &lt;p-timeline [value]="events2" layout="horizontal" align="top"&gt;
        &lt;ng-template pTemplate="content" let-event&gt;
            &#123;&#123;event&#125;&#125;
        &lt;/ng-template&gt;
    &lt;/p-timeline&gt;

    &lt;h6&gt;Bottom Align&lt;/h6&gt;
    &lt;p-timeline [value]="events2" layout="horizontal" align="bottom"&gt;
        &lt;ng-template pTemplate="content" let-event&gt;
            &#123;&#123;event&#125;&#125;
        &lt;/ng-template&gt;
    &lt;/p-timeline&gt;

    &lt;h6&gt;Alternate Align&lt;/h6&gt;
    &lt;p-timeline [value]="events2" layout="horizontal" align="alternate"&gt;
        &lt;ng-template pTemplate="content" let-event&gt;
            &#123;&#123;event&#125;&#125;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="opposite" let-event&gt;
            &nbsp;
        &lt;/ng-template&gt;
    &lt;/p-timeline&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component,OnInit&#125; from '@angular/core';
import &#123;PrimeIcons&#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './timelinedemo.html',
    styleUrls: ['./timelinedemo.scss']
&#125;)
export class TimelineDemo implements OnInit &#123;

    events1: any[];
    
    events2: any[];
    
    ngOnInit() &#123;
        this.events1 = [
            &#123;status: 'Ordered', date: '15/10/2020 10:30', icon: PrimeIcons.SHOPPING_CART, color: '#9C27B0', image: 'game-controller.jpg'&#125;,
            &#123;status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7'&#125;,
            &#123;status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800'&#125;,
            &#123;status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B'&#125;
        ];

        this.events2 = [
            "2020", "2021", "2022", "2023"
        ];
    &#125;
&#125;
</app-code>

<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
.custom-marker &#123;
    display: flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 50%;
    z-index: 1;
&#125;

::ng-deep &#123;
    .p-timeline-event-content,
    .p-timeline-event-opposite &#123;
        line-height: 1;
    &#125;
&#125;

@media screen and (max-width: 960px) &#123;
    ::ng-deep &#123;
        .customized-timeline &#123;
            .p-timeline-event:nth-child(even) &#123;
                flex-direction: row !important;
                
                .p-timeline-event-content &#123;
                    text-align: left !important;
                &#125;
            &#125;

            .p-timeline-event-opposite &#123;
                flex: 0;
            &#125;

            .p-card &#123;
                margin-top: 1rem;
            &#125;
        &#125;
    &#125;
&#125;
</app-code>

        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-timeline-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>